<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>搜索页</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<style>
			html, body {
				height: 100%;
				background-color: #fff;
			}
			.search-container {
				padding: 5px 15px;
				background-color: #F8F8F8;
			}
			.search-box {
				height: 40px;
				border-radius: 5px;
				background: url(../image/icon_search_bk.png) no-repeat 10px 50%;
				background-size: 20px 20px;
				background-color: #fff;
			}
		</style>
	</head>
	<body>
		<header class="top-header">
			<div class="top-nav-content flex-container flex-between flex-center-v">
				<div class="back-pre-pg top-nav-left icon-arrow-left"></div>
				<div>
					搜索
				</div>
				<div class="top-nav-right"></div>
			</div>
		</header>
		<div class="search-container">
			<div class="search-box"></div>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script type="text/javascript">
		var mId;
		var UIInput;
		//标记，用以表示从哪个页面跳转过来的搜索;1==历史报障.2==接障.3==平障.4==统计
		var mTag;
		apiready = function() {
			//适配iOS7+，Android4.4+状态栏沉浸式效果，详见config文档statusBarAppearance字段
			$api.fixStatusBar($api.dom('header'));
			initData();
			initView();
			showSearchView();
		};
		function initData() {
			mTag = parseInt(api.pageParam.tag);
		}

		function initView() {
			var searchBox = document.getElementsByClassName('search-box')[0];
			searchBox.onclick = function() {
				UIInput = UIInput || api.require('UIInput');
				UIInput.popupKeyboard({
					id : mId
				});
			}
			MyCom.backPrePg();
		}

		/**
		 * 展示view
		 */
		function showSearchView() {
			var box = document.getElementsByClassName('search-box')[0];
			UIInput = api.require('UIInput');
			UIInput.open({
				rect : {
					x : box.offsetLeft + 40,
					y : box.offsetTop + (box.offsetHeight - 20) / 2,
					w : box.offsetWidth - 40,
					h : 20
				},
				styles : {
					bgColor : '#fff',
					size : 14,
					color : '#000',
					placeholder : {
						color : '#ccc'
					}
				},
				autoFocus : true,
				placeholder : '这是一个输入框',
				keyboardType : 'search',
				fixedOn : api.frameName
			}, function(ret, err) {
				var msg;
				var mId;
				if (ret) {
					mId = ret.id;
					if (ret.eventType == 'search') {
						UIInput.value(function(ret, err) {
							if (ret) {
								msg = MyCom.trim(ret.msg)
								dealSearchContent(msg)
							} else {
								MyCom.errorTip(1);
							}
						});
					}
				} else {
					MyCom.errorTip(1);
				}
			});
		}

		/**
		 * 处理搜搜的内容1==历史报障.2==接障.3==平障.4==统计
		 */
		function dealSearchContent(msg) {
			
			if (mTag == 1) {
				triggerSearchListener(msg);
				api.closeWin({
				});
			} else {
				api.openWin({
					name : 'search_result',
					url : './search_result.html',
					pageParam : {
						'searchMsg' : msg,
						'tag' : mTag
					}
				});
			}
		}

		/**
		 * 触发搜索
		 */
		function triggerSearchListener(msg) {
			api.sendEvent({
				name : 'SearchListener',
				extra : {
					'searchMsg' : msg
				}
			});
		}
	</script>
</html>